<template>
  <div class="container">
    <Navbar :title="title" left-text="返回" left-arrow @click-left="goBack">
    </Navbar>


    <div class="gwclist" v-if="show">
      <div class="shop-cart-listbox1">
        <van-sticky :offset-top="46">
          <div class="shop-cart-box2">
            <van-checkbox v-model="checked" @click="handleCheck" checked-color="#ee0a24" icon-size="24px"
              style="font-size: 1rem;">全选
            </van-checkbox>
            <van-button type="danger" size="small" round @click="handleDel">删除</van-button>
          </div>
        </van-sticky>

        <van-checkbox-group class="h30" v-model="checks" ref="checkboxGroup">

          <div class="index-goods fbox" v-for="item in carts" :key="item.id">
            <div class="leftbox">
              <van-checkbox :name="item.id" icon-size="24px" checked-color="#ee0a24" @click="oncheck"></van-checkbox>
              <span class="index-goods-img"><img :src="item.product.cover_cdn"></span>
            </div>
            <div class="index-goods-textbox rightbox">
              <span class="index-goods-text1" style="height: auto !important;">
                <span :class="item.product.flag_class2" id="tits">
                  {{ item.product.flag_text }}</span>
                {{ item.product.name }}</span>
              <div class="index-goods-text2">￥<i class="priceJs">{{ item.price }}</i></div>

              <div class="shop-cart-box3" style="text-align: right;">
                <van-stepper v-model="item.nums" integer theme="round" button-size="22" show-input :name="item.id"
                  @change="numsChange" />
              </div>

            </div>
          </div>
        </van-checkbox-group>

      </div>
    </div>

    <van-empty v-else image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
      description="购物车还是空的">
      <van-button round type="danger" class="bottom-button" to="/product/base/index">
        <van-icon name="shopping-cart-o" size="1.2rem" style="margin-right: 10px;" />立即采购
      </van-button>
    </van-empty>

    <div class="clear"></div>
    <div class="likebox">
      <div class="tit">•●●<span>猜你喜欢</span>●●•</div>

      <ul class="proul">

        <li v-for="(item, index) in products" :key="item.id">
          <router-link :to="{ path: '/product/base/detail', query: { id: item.id } }"><img :src="item.cover_cdn" />
          </router-link>
          <router-link :to="{ path: '/product/base/detail', query: { id: item.id } }">
            <p class="tit">
              {{ item.name }}
            </p>
          </router-link>
          <div class="price">
            <p>￥{{ item.price }}<span>￥18999</span></p>
          </div>
        </li>

      </ul>
    </div>

    <van-submit-bar v-if="show" :price="total" button-text="提交订单" @submit="onSubmit" class="b50">
      <van-checkbox v-model="checkAll" checked-color="#ee0a24" @click="checkedAll">全选</van-checkbox>
      <template #tip>
        最近疫情原因，配送时间可能延长，请谅解~
      </template>
    </van-submit-bar>

    <Footer></Footer>
  </div>
</template>

<script>
import Navbar from "../Navbar.vue";
import Footer from "../Footer.vue";

export default {
  name: "Cart",
  data() {
    return {
      nums: 1,
      checks: [],
      checked: false,
      checkAll: false,
      checkFlag: false,
      checkFlag2: false,
      title: "购物车",
      show: true,
      userid: this.$cookies.get('ShopUser') ? this.$cookies.get('ShopUser').id : 0,
      carts: [],
      products: [],
    };
  },
  methods: {
    goBack() {
      this.$router.push('/')
    },
    async initProducts() {
      let res = await this.$api.initProducts();
      if (res.code === 1) {
        this.products = res.data.tuiProducts;
      } else {
        this.$notify({
          type: "warning",
          message: "获取失败",
          onClose: () => {
            return false;
          },
        });
      }
    },
    onSubmit() {
      // let data = {
      //   idArr: this.checks,
      //   userid: this.userid,
      //   total: this.total * 0.01
      // };
      let idArr = this.checks;

      if (idArr.length <= 0) {
        this.$notify({
          type: 'warning',
          message: '请选择要购买的商品',
          duration: 1500
        })
        return false
      }
      this.$router.push({ path: '/user/order/buy', query: { action: 'cart', idArr } });

    },
    async handleDel() {

      if (this.checks.length <= 0) {
        // console.log(11);
        this.$notify({
          type: 'warning',
          message: '请选择商品'
        })
      }

      let data = {
        idArr: this.checks,
        userid: this.userid
      }

      let res = await this.$api.delShop(data);
      // console.log(res);

      if (res.code === 1) {
        this.$notify({
          type: 'success',
          message: res.msg,
          duration: 1000,
          onClose: () => {
            this.carts = res.data;
          }
        })
      } else {
        this.$notify({
          type: 'danger',
          message: res.msg,
          duration: 1000
        })
      }

    },
    handleCheck() {
      // this.checkFlags
      if (this.checkFlag2) {
        this.checkFlag2 = false;
        this.checked = false;
        this.$refs.checkboxGroup.toggleAll(false);
      } else {
        this.checkFlag2 = true;
        this.checked = true;
        this.$refs.checkboxGroup.toggleAll(true);
      }
      console.log(this.checks);
    },
    checkedAll() {
      if (this.checkFlag) {
        this.checkFlag = false;
        this.checked = false;
        this.$refs.checkboxGroup.toggleAll();
      } else {
        this.checkFlag = true;
        this.checked = true;
        this.$refs.checkboxGroup.toggleAll(true);
      }
      // console.log(this.checks);
    },
    oncheck() {
      if (this.checked.length) {
        this.checkAll = true
        this.checked = true;
      } else {
        this.checkAll = false
        this.checked = false;
      }
    },
    async numsChange(val, detail) {
      this.$toast.loading({ duration: 500, forbidClick: true });

      // console.log(val);
      // console.log(detail);
      let data = {
        id: detail.name,
        nums: val,
        userid: this.userid
      };

      // return false

      let res = await this.$api.numsChange(data);

      if (res.code === 1) {
        this.carts = res.data;
      } else {
        this.$notify({
          type: 'warning',
          message: res.msg,
          duration: 1000
        })
      }

    },
    async initCart() {
      let res = await this.$api.initCart({ userid: this.userid });

      // console.log(res);
      if (res.code === 1) {
        this.carts = res.data;
      } else {
        this.show = false;
      }
    },
  },
  computed: {
    total() {
      let total = 0;

      let checks = this.checks;
      let carts = this.carts;

      checks.forEach(item => {
        for (const val of carts) {
          // console.log(val);
          if (item === val.id) {
            total += parseFloat(val.total)
          }
        }
      });

      return total * 100;
    },
  },
  mounted() {
  },
  created() {
    this.initProducts();
    this.initCart();
  },
  components: {
    Navbar,
    Footer,
  },

}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
}

.h30 {
  margin-top: 30px;
}

.shop-cart-box2 {
  display: flex;
  justify-content: space-between;
}

#tits {
  line-height: 1.6875rem !important;
}

.fbox {
  display: flex;
  justify-content: space-between;
  margin: 3px 0;
}

.leftbox {
  display: flex;

}

.leftbox img {
  margin-left: 10px;
}

.rightbox {
  max-width: 226px;
  margin-left: 20px !important;
}

.b50 {
  bottom: 50px !important;
}
</style>
